<template>
	<view class="content">
		<view class="top">
		</view>
		<view class="card">
			<image src="../../static/icon/logo.png" mode=""></image>
			<view class="form">
				<!-- <uni-easyinput :inputBorder="false" focus @focus="running" @blur="Running" type="text" -->
				<!-- placeholder="请输入手机号"></uni-easyinput> -->
				<input @focus="running" @blur="Running" type="text" placeholder="请输入手机号">
				<view class="line">
					<view :animation="animationData" class="line2"></view>
				</view>
				<!-- <uni-easyinput :inputBorder="false" @focus="running2" @blur="Running2" type="text" -->
				<!-- placeholder="请输入手机号"></uni-easyinput> -->
				<view style="display: flex;justify-content: space-between;">
					<input @focus="running2" @blur="Running2" type="text" placeholder="请输入验证码">
					<text style="font-size: 12px;color: #ff5e81;" @click="YZM">{{ but }}</text>
				</view>
				<view class="line">
					<view :animation="animationData2" class="line2"></view>
				</view>
			</view>
			<view class="info">
				登录及表示同意
				<text @click="Goto('/pages/login/deal/deal')">
					《用户注册协议》
				</text>

			</view>
			<button class="outlogin" @click="login">登录</button>
			<button class="outlogin" @click="wxLogin">微信一键登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				userInfo: {
					name: "",
					avater: "",
					phone: ""
				},
				animationData: {},
				animationData2: {},
				but: "发送验证码"
			};
		},
		mounted() {
			this.animation = uni.createAnimation()
			this.animation2 = uni.createAnimation()
		},
		methods: {
			// 获取微信个人信息
			getUserInfo() {
				return new Promise((resolve, reject) => {
					uni.getUserProfile({
						desc: '获取个人信息',
						success: (res) => {
							resolve(res.userInfo)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			// 获取js_code
			getJsCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						success(res) {
							resolve(res.code)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			// 微信登录方法
			wxLogin(){
				uni.navigateTo({
					url:"/pages/login/sizn/sizn"
				})
			},
			// wxLogin() {
			// 	let userInfo = this.getUserInfo()
			// 	let js_code = this.getJsCode()
			// 	Promise.all([userInfo, js_code]).then((res) => {
			// 		this.userInfo = res[0]
			// 		console.log(res[0]);
			// 		uni.request({
			// 			url: "https://api.weixin.qq.com/sns/jscode2session",
			// 			data: {
			// 				appid: "wx53d8eb9533977f1f",
			// 				secret: "cb459b14b192afeb63b64eacde54fab5",
			// 				js_code: res[1],
			// 				grant_type: 'authorization_code'
			// 			},
			// 			success: (res) => {
			// 				console.log(res);
			// 				let openid = res.data.openid
			// 				uni.request({
			// 					url: "http://127.0.0.1:7980/zjb/login",
			// 					method: 'POST',
			// 					data: {
			// 						name: this.userInfo.nickName,
			// 						avater: this.userInfo.avatarUrl,
			// 						openid,
			// 						phone: ""
			// 					},
			// 					success: ({
			// 						data
			// 					}) => {
			// 						console.log(data);
			// 						uni.setStorage({
			// 							key: 'userinfo',
			// 							data: {
			// 								name: data.data.name,
			// 								avater: data.data.avater,
			// 								phone: "15081609437"
			// 							}
			// 						});
			// 						uni.switchTab({
			// 							url: "/pages/tabbar/tabbar-1/tabbar-1"
			// 						})
			// 					}
			// 				})
			// 			}
			// 		})
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// },
			login() {
				uni.showToast({
					title:"无法登录"
				})
				// uni.setStorage({
				// 	key: 'userinfo',
				// 	data: {
				// 		name: "银狼",
				// 		avater: "https://img-static.mihoyo.com/communityweb/upload/9c7ca480aab8665e16405da31a6f828b.png",
				// 		phone: "15081609437"
				// 	}
				// });
				// uni.switchTab({
				// 	url: "/pages/tabbar/tabbar-1/tabbar-1"
				// })
			},
			async YZM() {
				if (this.but == "发送验证码") {
					// 剩余8次
					// 			uni.request({
					// 				url:"http://106.ihuyi.com/webservice/sms.php?method=Submit&account=C62297904&password=2f91bc06a4a2dbc62fcbf937aa33b96c&mobile=15102668927&content=您的验证码是：1234。请不要把验证码泄露给其他人。",
					// 				success(res) {
					// 					console.log(res);
					// 				}

					// 			})
					let time = 10
					let timer = setInterval(() => {
						time--
						this.but = time + "秒后重新发送"
						if (time == 0) {
							clearInterval(timer)
							this.but = "发送验证码"
						}
					}, 1000)
				}
			},
			running() {
				this.animation.translateX(0).step()
				this.animationData = this.animation.export()
			},
			running2() {
				this.animation2.translateX(0).step()
				this.animationData2 = this.animation2.export()
			},
			Running() {
				this.animation.translateX(-375).step()
				this.animationData = this.animation.export()
			},
			Running2() {
				this.animation2.translateX(-375).step()
				this.animationData2 = this.animation2.export()
			},
			Goto(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	};
</script>


<style scoped lang="scss">
	.outlogin {
		background-color: #ff5e81;
		border-radius: 20px;
		margin-top: 20px;
		color: #fff;
	}

	.content {
		height: 100vh;
		background-color: #ecfdfa;
	}

	.top {
		background-color: #2bcddd;
		height: 150px;
		border-radius: 0 0 30px 30px;
		padding: 15px;
		padding-bottom: 0;
		color: #fff;
	}

	.card {
		border-radius: 20px;
		// height: 300px;
		margin: -50px 20px 0 20px;
		background-color: #fff;
		padding: 15px;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
		text-align: center;

		image {
			width: 100px;
			height: 100px;
			margin: 50px 0;
		}
	}

	.form {
		text-align: left;
		padding: 0 15px;

		.line {
			margin: 10px 0 20px;
			height: 2px;
			background-color: #eee;
			overflow: hidden;
		}

		.line2 {
			height: 1px;
			background-color: #ff5e81;
		}

	}

	.info {
		text-align: left;
		padding: 0 10px;
		color: #999;
		margin-bottom: 200px;

		text {
			color: #ff5e81;
		}
	}
</style>